<template>
  <basic-container>
    <div class="container-body">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-row>
          <el-form-item label="项目编号:">
            <el-input v-model="query.projectCode" clearable placeholder="项目编号" size="small"></el-input>
          </el-form-item>
          <el-form-item label="项目名称:">
            <el-input v-model="query.projectName" clearable placeholder="项目名称" size="small"></el-input>
          </el-form-item>
          <el-form-item label="年度:">
            <el-select v-model="query.noticeYear" clearable>
              <el-option v-for="planHeadYear in planHeadYears" :key="planHeadYear" :label="planHeadYear" :value="planHeadYear"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button :loading="loading" icon="el-icon-search" size="small" type="primary" @click="onSearch">搜索
            </el-button>
            <el-button :loading="loading" icon="el-icon-delete" size="small" @click="searchReset">清空</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table v-loading="loading" :data="data" border
                header-row-class-name="container-table-header"
                highlight-current-row @cell-click="handleCellClick"
                row-key="projectId" size="small" stripe style="width: 100%;margin-bottom: 20px;">
        <el-table-column label="项目编号" prop="projectCode" width="140">
        </el-table-column>
        <el-table-column label="项目名称" prop="projectName" width="270">
          <template v-slot="scope">
              <span :style="{ color: scope.row.projectProgress === 7 ? '#f16262' : '' }">
                {{ scope.row.projectName }}
                <template v-if="scope.row.projectProgress === 7">
                  <div style="display: inline-block">【已终止】</div>
                </template>
              </span>
          </template>
        </el-table-column>
        <el-table-column label="年度" prop="projectYear" width="80">
        </el-table-column>
        <el-table-column label="建设单位" prop="auditedCompanyName">
        </el-table-column>
        <el-table-column label="立项日期" prop="projectDate">
        </el-table-column>
        <el-table-column label="项目进度" prop="projectProgress">
          <template slot-scope="scope">
            <DictTag :options="dict.type.project_progress" :value="scope.row.projectProgress"></DictTag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-view" @click="showViewBox(scope.row)">查看</el-button>
            <el-button v-if="scope.row.projectProgress !== 7" type="text" size="small" icon="el-icon-document-delete" @click="termination(scope.row)">项目终止</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="container-page">
        <el-pagination
          :current-page="page.current"
          :page-size="10"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChange"
          @current-change="currentChange">
        </el-pagination>
      </div>
    </div>

    <el-dialog top="5vh" :title="formTitle" :visible.sync="viewBox"
               :append-to-body="true" :before-close="closeViewBox" width="1200px">
      <TerminationProjectView :params="form"></TerminationProjectView>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" size="small" @click="closeViewBox">关闭</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>
<script>
import {mapGetters} from "vuex";
import Tinymce from '@/components/Tinymce'
import TerminationProjectView from "@/components/actForm/TerminationProjectView";
import {fetchProjectList, termination, getProject} from "@/api/adis/project/project";
import {listPlanHeadYear} from "@/api/adis/work/plan";


export default {
  components: {
    TerminationProjectView,
    Tinymce,
  },
  dictTypes: ['project_progress'],
  data() {
    return {
      viewBox: false,
      formTitle: '',
      loading: false,
      query: {},
      form: {},
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      planHeadYears: [],
    }
  },
  computed: {
    ...mapGetters(["permissions", "userInfo"])
  },
  created() {
    this.onLoad(this.page);
  },
  methods: {
    // 获取所有已经审批通过的年度计划年度
    listPlanHeadYear(){
      listPlanHeadYear().then((res) => {
        this.$set(this,"planHeadYears", res.data.data)
      });
    },

    handleCellClick(row, column) {
      if (row && column.label !== "操作"){
        this.showViewBox(row)
      }
    },

    showViewBox(row) {
      getProject(row.projectId).then((res) => {
        this.form = res.data.data;
        this.formTitle = row.projectName;
        this.viewBox = true;
      });
    },
    closeViewBox() {
      this.viewBox = false;
    },

    // 项目终止
    termination(row){
      this.$confirm("确定终止"+ row.projectName + "?" , {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return termination(row);
      }).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
      });
    },

    onSearch() {
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      this.query.isEngineering = true;
      fetchProjectList(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.listPlanHeadYear();
        this.loading = false;
      });
    },
  }
};
</script>

<style>
</style>
